<template>
  <div>
    <el-dialog :title="showTitle" :visible="dialogFormVisible" @close="dialogFormClose">
      <el-form
        ref="roleDialogForm"
        label-width="80px"
        :model="roleDialogForm"
        :rules="roleForm"
      >
        <el-form-item
          prop="name"
          label="角色"
        >
          <el-input v-model="roleDialogForm.name" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="roleDialogForm.description" type="textarea" row="3" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormClose">取 消</el-button>
        <el-button v-loading="loading" type="primary" @click="onSumit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addRoleApi, updateRoleApi } from '@/api/setting'
export default {
  name: '',
  components: {},
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      roleDialogForm: {
        name: '',
        description: ''
      },
      roleForm: {
        name: [{ required: true, message: '角色名称必填', trigger: 'blur' }],
        description: [{ required: true, message: '角色名称必填', trigger: 'blur' }]
      },
      loading: false
    }
  },
  computed: {
    showTitle() {
      return this.roleDialogForm.id ? '编辑角色' : '新增角色'
    }
  },
  watch: {},
  created() {},
  methods: {
    dialogFormClose() {
      this.$emit('update:dialogFormVisible', false)
      this.$refs.roleDialogForm.resetFields()
      this.roleDialogForm = {
        name: '',
        description: ''
      }
    },
    async onSumit() {
      try {
        const res = await this.$refs.roleDialogForm.validate()
        console.log(res)
        this.roleDialogForm.id ? await updateRoleApi(this.roleDialogForm) : await addRoleApi(this.roleDialogForm)
        // await addRoleApi(this.roleForm)
        this.$message.success(this.roleDialogForm.id ? '角色编辑成功' : '角色新增成功')
        this.dialogFormClose()
        this.$parent.getRoleListFn()
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped>

</style>
